// 使用JQ库及高级单例模式[基础格式如下]

/* $(function () {
	let bannerRender = (function anonymous() {
		
		return {
			init: function init() {

			}
		}
	})();
	bannerRender.init();
}); */

$(function () {
	let bannerRender = (function anonymous() {
		// 获取元素
		let $container = $('.container'),
			$wrapper = $container.children('.wrapper'),
			$focus = $container.children('.focus'),
			$arrowLeft = $container.children('.arrowLeft'),
			$arrowRight = $container.children('.arrowRight'),
			$slideList = null,
			$focusList = null;
			$wrapper.children

		// 配置全局变量
		let imgIndex = 0, // 轮播图显示索引
			LastImgIndex = 0, // 存储上一次索引
			interval = 3000, // 动画执行间隔
			duration = 700, // 每一次变换动画所需时间
			autoTimer; // 定时器

		// 1. 获取数据
		let queryData = function queryData() {
			return new Promise((resolve, reject) => {
				$.ajax({
					method: 'get',
					url: './json/banner.json',
					asyn: true,
					dataType: 'json',
					success: resolve, // 成功执行会传入数据
					error: reject
				})
			})
		};

		// 2. 绑定数据
		let bindHTML = function bindHTML(data) {
			let strSlide = ``,
				strFocus = ``;
			$.each(data, (index, item) => {
				let {img, desc} = item;
				strSlide += `<div class="slide">
					<img src="${img}" alt="${desc}">
				</div>`;
				strFocus += `<li class="${index === 0 ? 'active' : ''}"></li>`;
			});
			
			$wrapper.html(strSlide);
			$focus.html(strFocus);

			$slideList = $wrapper.children('.slide');
			$focusList = $focus.children('li');
		};

		// 特殊： 由第6点[点击左右切换而提取]
		let publicAnimate = function publicAnimate() {
			// a. 让上一张轮播图中的z-index = 0; opacity = 0
			$slideList.eq(LastImgIndex).css({
				zIndex: '0',
				opacity: '0'
			});

			// b. 让下一张轮播图中的z-index = 0
			$slideList.eq(imgIndex).css({
				zIndex: '1'
			});

			// c. 让下一张轮播图中的opacity 逐步变为了 1
			$slideList.eq(imgIndex).stop().animate({
				opacity: '1'
			}, duration);

			focusChange();

			// d. 让下一次动画的上个索引变为当前的索引
			LastImgIndex = imgIndex;
		};

		// 3. 主轮播图
		let autoMove = function autoMove() {
			imgIndex++;
			// e. 处理边界问题
			if (imgIndex >= $slideList.length) {
				imgIndex = 0;
			}
			
			publicAnimate();
		};

		// 4. focus切换
		let focusChange = function focusChange() {
			$focusList.eq(LastImgIndex).attr({
				class: ''
			});
			$focusList.eq(imgIndex).attr({
				class: 'active'
			});
		};

		// 5. 鼠标进入区域停止动画
		let handleMouse = function handleMouse() {
			$container.mouseenter(() => {
				// a. 鼠标进入时停动画定时器且把a标签改块显示 [add是连写方式]
				clearInterval(autoTimer);
				$arrowLeft.add($arrowRight).css({
					display: 'block'
				});
			}).mouseleave(() => {
				// b. 鼠标离开时开启动画定时器且把a标签改none [add是连写方式]
				autoTimer = setInterval(() => {
					autoMove();
				}, interval);
				$arrowLeft.add($arrowRight).css({
					display: 'none'
				});
			})
		};

		// 6. 点左右切换
		let handleArrow = function handleArrow() {
			$arrowRight.on('click', function () {
				autoMove();
			});
			$arrowLeft.on('click', function () {
				imgIndex--;
				// e. 处理边界问题
				if (imgIndex < 0) {
					imgIndex = $slideList.length - 1;
				}
				
				publicAnimate();
			})
		};

		// 7. 点焦点切换
		let handleFocus = function handleFocus() {
			$focusList.on('click', function () {
				// 返回点击元素在同辈中索引的位置
				let curIndex = $(this).index();
				if (curIndex === imgIndex) {
					return;
				}
				imgIndex = curIndex;
				publicAnimate();
			})
		};

		return {
			init: function init() {
				let promise = queryData();
				promise.then(data => {
					bindHTML(data);
					autoTimer = setInterval(() => {
						autoMove();
					}, interval);
					handleMouse();
					handleArrow();
					handleFocus();
				});
			}
		}
	})();
	bannerRender.init();
});
